<template>
  <div class="login-container">
    <!-- 左侧信息面板 -->
    <div class="info-panel">
      <h2 class="welcome">摄影世界</h2>
      <p class="subtitle">专业摄影管理系统</p>
      <div class="image-carousel">
        <img :src="images[currentIndex]" alt="Carousel" class="carousel-image" />
        <div class="carousel-indicators">
          <span 
            v-for="(_, index) in images" 
            :key="index" 
            :class="['indicator', { active: index === currentIndex }]"
            @click="setCurrentImage(index)"
          ></span>
        </div>
      </div>
      <div class="decor-icons">
        <svg class="icon-camera" viewBox="0 0 24 24" width="24" height="24">
          <path d="M12 15.2a3.2 3.2 0 100-6.4 3.2 3.2 0 000 6.4z" />
          <path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" />
        </svg>
        <svg class="icon-aperture" viewBox="0 0 24 24" width="24" height="24">
          <circle cx="12" cy="12" r="10" />
          <line x1="14.31" y1="8" x2="20.05" y2="17.94" />
          <line x1="9.69" y1="8" x2="21.17" y2="8" />
          <line x1="7.38" y1="12" x2="13.12" y2="2.06" />
          <line x1="9.69" y1="16" x2="3.95" y2="6.06" />
          <line x1="14.31" y1="16" x2="2.83" y2="16" />
          <line x1="16.62" y1="12" x2="10.88" y2="21.94" />
        </svg>
        <svg class="icon-image" viewBox="0 0 24 24" width="24" height="24">
          <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
          <circle cx="8.5" cy="8.5" r="1.5" />
          <polyline points="21 15 16 10 5 21" />
        </svg>
      </div>
    </div>

    <!-- 微粒背景 -->
    <canvas id="particle-canvas" class="particle-canvas"></canvas>

    <!-- 登录表单靠右（中间偏右） -->
    <div class="login-form">
      <div class="camera-icon">
        <svg viewBox="0 0 24 24" width="48" height="48">
          <circle cx="12" cy="12" r="12" class="camera-bg" />
          <path d="M12 15.2a3.2 3.2 0 100-6.4 3.2 3.2 0 000 6.4z" class="camera-lens" />
          <path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" class="camera-body" />
        </svg>
      </div>
      <div class="title">欢迎登录</div>
      <el-form :model="loginForm" :rules="rules" ref="loginFormRef" class="form-inner">
        <el-form-item prop="username">
          <el-input 
            v-model="loginForm.username" 
            placeholder="请输入账号" 
            class="input-field"
          >
            <template #prefix>
              <svg class="input-icon" viewBox="0 0 24 24" width="18" height="18">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                <circle cx="12" cy="7" r="4" />
              </svg>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input 
            v-model="loginForm.password" 
            :type="showPassword ? 'text' : 'password'"
            placeholder="请输入密码" 
            class="input-field"
          >
            <template #prefix>
              <svg class="input-icon" viewBox="0 0 24 24" width="18" height="18">
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
              </svg>
            </template>
            <template #suffix>
              <span class="show-pwd-icon" @click="showPassword = !showPassword" style="cursor:pointer;">
                <svg v-if="showPassword" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/>
                  <circle cx="12" cy="12" r="3"/>
                </svg>
                <svg v-else viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.77 21.77 0 0 1 5.06-6.06"/>
                  <path d="M1 1l22 22"/>
                  <path d="M9.53 9.53A3 3 0 0 0 12 15a3 3 0 0 0 2.47-5.47"/>
                </svg>
              </span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="extras">
          <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
          <span class="forgot" @click="goForgot">忘记密码?</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" class="login-button" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
      <div class="social-login">
        <span>其他方式登录</span>
        <div class="social-icons">
          <div class="social-icon" @click="socialLogin('qq')">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
              <path d="M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm3 7h-2v2h-2v-2H9v-2h2V9h2v2h2v2z" />
            </svg>
          </div>
          <div class="social-icon" @click="socialLogin('wechat')">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path d="M8.2 13.3c-0.5 0-0.9-0.4-0.9-0.9s0.4-0.9 0.9-0.9c0.5 0 0.9 0.4 0.9 0.9s-0.4 0.9-0.9 0.9z" />
              <path d="M11.7 13.3c-0.5 0-0.9-0.4-0.9-0.9s0.4-0.9 0.9-0.9c0.5 0 0.9 0.4 0.9 0.9s-0.4 0.9-0.9 0.9z" />
              <path d="M15.2 17.1c-0.4 0-0.7-0.3-0.7-0.7s0.3-0.7 0.7-0.7c0.4 0 0.7 0.3 0.7 0.7s-0.3 0.7-0.7 0.7z" />
              <path d="M18.1 17.1c-0.4 0-0.7-0.3-0.7-0.7s0.3-0.7 0.7-0.7c0.4 0 0.7 0.3 0.7 0.7s-0.3 0.7-0.7 0.7z" />
              <path d="M16.7 13.3c-1.8 0-3.3-1.2-3.3-2.8 0-1.5 1.5-2.8 3.3-2.8s3.3 1.2 3.3 2.8c0 1.5-1.5 2.8-3.3 2.8z" />
              <path d="M10 18.9c-2.3 0-4.2-1.6-4.2-3.5 0-2 1.9-3.5 4.2-3.5s4.2 1.6 4.2 3.5c0 2-1.9 3.5-4.2 3.5z" />
            </svg>
          </div>
          <div class="social-icon" @click="socialLogin('github')">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const router = useRouter()

// 轮播图片与计数
const images = ['	https://hrzt.oss-cn-shanghai.aliyuncs.com/photo/b01bef87-95b5-439d-a238-3fa48e423f88_DSC_0001的副本2.jpg', '/images/pic2.jpg', '/images/pic3.jpg']
const currentIndex = ref(0)
const loading = ref(false)
const loginFormRef = ref(null)
const showPassword = ref(false)

const loginForm = reactive({ username: '', password: '', remember: false })
const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const setCurrentImage = (index) => {
  currentIndex.value = index
}

const handleLogin = () => {
  loginFormRef.value.validate(async valid => {
    if (!valid) return
    loading.value = true
    try {
      const res = await request.post('/admin/login', {
        username: loginForm.username,
        password: loginForm.password
      })
      
      // 检查响应状态码
      if (res.data.code !== 0) {
        ElMessage.error(res.data.msg || '登录失败')
        return
      }
      
      localStorage.setItem('adminToken', res.data.data.token)
      ElMessage.success('登录成功')
      
      // 获取重定向地址，如果存在则跳转，否则跳转到默认页面
      const redirect = router.currentRoute.value.query.redirect || '/admin/dashboard'
      router.push(redirect)
    } catch (error) {
      console.error('登录异常:', error)
      ElMessage.error(error.response?.data?.msg || '登录失败')
    } finally {
      loading.value = false
    }
  })
}
const goForgot = () => router.push('/forgot-password')
const socialLogin = provider => ElMessage.info(`社交登录：${provider}`)

// Canvas 粒子动画 & 图片轮播
onMounted(() => {
  // 轮播
  setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % images.length
  }, 5000)

  // 粒子效果
  const canvas = document.getElementById('particle-canvas')
  const ctx = canvas.getContext('2d')
  let w = canvas.width = window.innerWidth
  let h = canvas.height = window.innerHeight
  const particles = []
  function init() {
    particles.length = 0
    for (let i = 0; i < 80; i++) {
      particles.push({ 
        x: Math.random() * w, 
        y: Math.random() * h, 
        r: Math.random() * 1.5 + 0.5, 
        d: Math.random() * 50,
        color: `rgba(255, 255, 255, ${Math.random() * 0.2 + 0.1})`
      })
    }
  }
  function draw() {
    ctx.clearRect(0, 0, w, h)
    particles.forEach(p => {
      ctx.fillStyle = p.color
      ctx.beginPath()
      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2)
      ctx.fill()
    })
    update()
    requestAnimationFrame(draw)
  }
  let angle = 0
  function update() {
    angle += 0.01
    particles.forEach(p => {
      p.y += Math.cos(angle + p.d) + 0.3 + p.r / 2
      p.x += Math.sin(angle) * 1.5
      if (p.x > w + 5 || p.x < -5 || p.y > h) {
        p.x = Math.random() * w
        p.y = -10
      }
    })
  }
  window.addEventListener('resize', () => {
    w = canvas.width = window.innerWidth
    h = canvas.height = window.innerHeight
    init()
  })
  init()
  draw()
})

</script>

<style scoped>
.login-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a, #2c2c2c, #3d3d3d);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 左侧信息面板 */
.info-panel {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
  z-index: 2;
  max-width: 400px;
}
.welcome {
  font-size: 42px;
  margin: 0;
  font-weight: 600;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.subtitle {
  font-size: 24px;
  margin: 8px 0 32px;
  font-weight: 300;
  opacity: 0.9;
}
.image-carousel {
  position: relative;
  margin-bottom: 30px;
}
.carousel-image {
  width: 320px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.5s ease;
}
.carousel-indicators {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  gap: 8px;
}
.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}
.indicator.active {
  width: 24px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.8);
}
.decor-icons {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}
.decor-icons svg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.3s ease;
}
.icon-camera path {
  fill: rgba(255, 255, 255, 0.2);
}
.decor-icons svg:hover {
  stroke: white;
  transform: scale(1.1);
}

.particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.login-form {
  position: relative;
  z-index: 1;
  width: 400px;
  padding: 40px;
  background: rgba(30, 30, 30, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  text-align: center;
  margin-left: 30%;
}
.camera-icon {
  margin-bottom: 20px;
}
.camera-bg {
  fill: #8a2be2;
}
.camera-lens {
  fill: #fff;
}
.camera-body {
  fill: #fff;
}
.title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 30px;
  color: #fff;
  letter-spacing: 1px;
}
.input-field {
  margin-bottom: 5px;
}
.input-field :deep(.el-input__wrapper) {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 8px;
  box-shadow: none !important;
  transition: all 0.3s ease;
}
.input-field :deep(.el-input__wrapper:hover),
.input-field :deep(.el-input__wrapper.is-focus) {
  background-color: rgba(255, 255, 255, 0.15);
}
.input-field :deep(.el-input__inner) {
  height: 46px;
  color: #fff;
  font-size: 15px;
}
.input-field :deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.5);
}
.input-icon {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-right: 8px;
}
.extras {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 25px;
}
.extras :deep(.el-checkbox__label) {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}
.extras :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #8a2be2;
  border-color: #8a2be2;
}
.forgot {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  margin-left: auto;
  transition: all 0.3s ease;
}
.forgot:hover {
  color: #fff;
  text-decoration: underline;
}
.login-button {
  width: 100%;
  height: 48px;
  font-size: 16px;
  border-radius: 8px;
  background: linear-gradient(90deg, #8a2be2, #4b0082);
  border: none;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
.login-button:hover {
  background: linear-gradient(90deg, #9b4dff, #5c1a99);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);
}
.social-login {
  margin-top: 30px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.social-login span {
  display: block;
  margin-bottom: 15px;
}
.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.social-icon:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}
.social-icon svg {
  fill: rgba(255, 255, 255, 0.7);
}
.show-pwd-icon {
  display: flex;
  align-items: center;
  color: #bbb;
  margin-right: 4px;
  transition: color 0.2s;
}
.show-pwd-icon:hover {
  color: #8a2be2;
}

@media (max-width: 1200px) {
  .login-form {
    margin-left: 0;
  }
  .info-panel {
    display: none;
  }
}
</style>